<template>
	<div>
		<div class="head2">
			<div>
				<router-link to="/pc/home">
					<h3><i class="el-icon-notebook-2"></i>&nbsp;更改个人信息</h3>
				</router-link>
			</div>
		</div>
		<div style="height: 10px;"></div>
		<div style="width: 90%; min-height: 30vh; display:flex;   justify-content:center;  align-items:center; ">
			<div style="width: 40vw;">
				<el-form :rules="formRule" label-width="100px" size="small" label-position="top">
					<el-form-item label="昵称" prop="name">
						<el-input v-model="form.nickname"></el-input>
					</el-form-item>
					<el-form-item label="电话" prop="phone">
						<el-input v-model="form.phone"></el-input>
					</el-form-item>
					<el-form-item label="地址" prop="addr">
						<el-input type="textarea" :rows="4" placeholder="请输入信息" v-model="form.addr">
						</el-input>
					</el-form-item>
				</el-form>
				<hr>
				<el-button type="danger" v-on:click="update()">确认更新个人信息</el-button>
			</div>
		</div>

		<p>&nbsp;</p>

	</div>
</template>

<script>
	export default {
		name: 'UpdateUser',
		data() {
			return {
				form: {
					nickname: '',
					phone: '',
					addr: ''
				},
				formRule: {
					name: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					addr: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			update() {
				this.$postx("/api/user/updateShip", this.form).then((resp) => {
					this.$message.error(resp.data.msg)
				})
				this.$router.push('/pc/user');
			} 
		},
		mounted() {
			this.$get("/api/user/shipInfo")
				.then(resp => {
					console.log("获取信息")
					console.log(resp.data.data)
					this.form.addr = resp.data.data.addr;
					this.form.phone = resp.data.data.phone;
					this.form.nickname = resp.data.data.name;
					console.log(this.form)
				})
		}
	}
</script>

<style scoped>
</style>